<template>
    <div>
        <el-card class="main_card">
            <!-- 搜索与添加区 -->
            <el-row :gutter="20" >
               <el-col :span="4">
                   <button  @click="addCate" class="add_btn">添加分类</button>
               </el-col>
            </el-row>
            <!-- 商品列表区 -->
            
            <el-table :data="cateList"  row-key="catId" border default-expand-all :tree-props="{children: 'cats', hasChildren: 'hasChildren'}">
                 <el-table-column prop="catName" label="分类名称" width="280">
                </el-table-column>
                 <el-table-column prop="catLevel" label="分类等级" width="280">
                     <template slot-scope="scope">
                        <el-tag v-if="scope.row.catLevel==0">一级</el-tag> 
                        <el-tag type="success" v-else-if="scope.row.catLevel==1">二级</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.catLevel==2">三级</el-tag>
                     </template>
                </el-table-column>
                 <el-table-column  label="操作" >
                     <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="removeCate(scope.row.strId)" ></el-button>
                     </template>
                </el-table-column>
             </el-table>
         </el-card>

         <el-dialog :visible.sync="cateDialogVisible" width="50%" :close-on-click-modal="false" title="修改用户名" >
            <el-form label-width="110px" >
                <el-form-item label="分类名">
                   <el-input v-model="addForm.catName"></el-input> 
                </el-form-item>
                <el-form-item label="父类">
                    <el-cascader v-model="addForm.catPid" :options="cateList" :props="cascaderProps" @change="handleChange" ref="myCascader"></el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  @click="cateDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="uploadcate">确 定</el-button>
            </span>
        </el-dialog>   
    </div>
</template>

<script>
export default {
    data(){
        return{
            cateList:[],
            cateDialogVisible:false,
            addForm:{
                catName:'',
                catPid:'',
                catLevel:''
            },
            cascaderProps:{
                value:'catId',
                label:'catName',
                children:'cats',
                expandTrigger: 'hover',
                checkStrictly:true,
                emitPath:false
            },
        }
    },
    methods:{
         //   获取商品分类数据
      async getCateList(){
          const{data:res}=await this.$http.get('rent/cat/findBypid/0');
          console.log(res);
          if(res.code!=200)
          return this.$message.error("获取商品分类失败!")
          this.cateList=res.data;
          
      },
      addCate()
      {
          this.cateDialogVisible=true;
      },
      async uploadcate()
      {
          console.log(this.addForm)
          const {data:res}=await this.$http.post('rent/cat/add',this.addForm);
          if(res.code==200)
          {
              this.$message.success("添加成功!")
          }
          this.getCateList();
          this.cateDialogVisible=false;
      },
      handleChange(){
          var node=this.$refs.myCascader.getCheckedNodes();
          this.addForm.catLevel=node[0].level;
          
      },
      async removeCate(id){
           const {data:res}=await this.$http.delete('rent/cat/delete/'+id);
           console.log(res)
          if(res.code==200)
          {
              this.$message.success("删除成功!")
          }
          this.getCateList();
          
      }
    },
    created()
    {
        this.getCateList();
    }
}
</script>

<style lang="less" scoped>
.el-table
{
    margin-top: 15px;
    font-size: 12px;
}
.add_btn
{
    border-radius:25px;
    height:40px;
    width:120px;
    font-weight:500;
    font-size:16px;  
    background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
    border:none;
    transition: 0.3s;
    cursor: pointer;
    color: #909399;
    &:hover{
        transform: scale(1.1);
        
    }
}

</style>